<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口测试页面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h1 class="text-center mb-4">服务使用说明</h1>

        <div class="card mb-4">
            <div class="card-header">
                <h2>登录接口</h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="loginUsername" class="form-control" placeholder="用户名">
                </div>
                <div class="mb-3">
                    <input type="password" id="loginPassword" class="form-control" placeholder="密码">
                </div>
                <button onclick="testLogin()" class="btn btn-primary">测试登录</button>
                <pre id="loginResult" class="mt-3 bg-light p-2 rounded"></pre>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h2>上传头像接口</h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="uploadToken" class="form-control" placeholder="token">
                </div>
                <div class="mb-3">
                    <input type="file" id="avatarFile" class="form-control">
                </div>
                <button onclick="testUploadAvatar()" class="btn btn-primary">上传头像</button>
                <pre id="uploadResult" class="mt-3 bg-light p-2 rounded"></pre>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h2>用户信息接口</h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="userInfoToken" class="form-control" placeholder="token">
                </div>
                <button onclick="testUserInfo()" class="btn btn-primary">获取用户信息</button>
                <pre id="userInfoResult" class="mt-3 bg-light p-2 rounded"></pre>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h2>修改用户信息接口</h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="updateToken" class="form-control" placeholder="token">
                </div>
                <div class="mb-3">
                    <input type="text" id="updateGender" class="form-control" placeholder="性别">
                </div>
                <div class="mb-3">
                    <input type="text" id="updateNickName" class="form-control" placeholder="昵称">
                </div>
                <div class="mb-3">
                    <input type="text" id="updateMotto" class="form-control" placeholder="座右铭">
                </div>
                <button onclick="testUpdateUserInfo()" class="btn btn-primary">修改用户信息</button>
                <pre id="updateUserInfoResult" class="mt-3 bg-light p-2 rounded"></pre>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h2>测试接口</h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="testCode" class="form-control" placeholder="code">
                </div>
                <div class="mb-3">
                    <input type="text" id="testMessage" class="form-control" placeholder="message">
                </div>
                <button onclick="testTest()" class="btn btn-primary">测试接口</button>
                <pre id="testResult" class="mt-3 bg-light p-2 rounded"></pre>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2>接口文档</h2>
            </div>
            <div class="card-body">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>地址</th>
                            <th>请求方式</th>
                            <th>请求字段</th>
                            <th>提交数据格式</th>
                            <th>请求头要求</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>/login</td>
                            <td>POST</td>
                            <td>username, password</td>
                            <td>application/json</td>
                            <td>无特殊要求</td>
                        </tr>
                        <tr>
                            <td>/upload-avatar</td>
                            <td>POST</td>
                            <td>avatar 文件</td>
                            <td>multipart/form-data</td>
                            <td>Content-Type: multipart/form-data</td>
                        </tr>
                        <tr>
                            <td>/user-info</td>
                            <td>GET</td>
                            <td>无</td>
                            <td>无</td>
                            <td>Authorization: Bearer &lt;token&gt;</td>
                        </tr>
                        <tr>
                            <td>/update-user-info</td>
                            <td>POST</td>
                            <td>gender, nick_name, motto 等</td>
                            <td>application/json</td>
                            <td>Authorization: Bearer &lt;token&gt;</td>
                        </tr>
                        <tr>
                            <td>/test</td>
                            <td>GET</td>
                            <td>code, message</td>
                            <td>无</td>
                            <td>无特殊要求</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        const BASE_URL = `${window.location.protocol}//${window.location.hostname}:${window.location.port || 3000}`;

        async function testLogin() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            const resultElement = document.getElementById('loginResult');

            try {
                const response = await fetch(`${BASE_URL}/login`, { 
                    method: 'POST', 
                    headers: { 
                        'Content-Type': 'application/json' 
                    }, 
                    body: JSON.stringify({ username, password }) 
                });
                const data = await response.json();
                resultElement.textContent = JSON.stringify(data, null, 2);
                if (data.data && data.data.token) {
                    document.getElementById('uploadToken').value = data.data.token;
                    document.getElementById('userInfoToken').value = data.data.token;
                    document.getElementById('updateToken').value = data.data.token;
                }
            } catch (error) {
                resultElement.textContent = `请求出错: ${error.message}`;
            }
        }

        async function testUploadAvatar() {
            const token = document.getElementById('uploadToken').value;
            const fileInput = document.getElementById('avatarFile');
            const file = fileInput.files[0];
            const resultElement = document.getElementById('uploadResult');

            if (!file) {
                resultElement.textContent = '请选择文件';
                return;
            }

            const formData = new FormData();
            formData.append('avatar', file);

            try {
                const response = await fetch(`${BASE_URL}/upload-avatar`, { 
                    method: 'POST', 
                    headers: { 
                        'Authorization': `Bearer ${token}` 
                    }, 
                    body: formData 
                });
                const data = await response.json();
                resultElement.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                resultElement.textContent = `请求出错: ${error.message}`;
            }
        }

        async function testUserInfo() {
            const token = document.getElementById('userInfoToken').value;
            const resultElement = document.getElementById('userInfoResult');

            try {
                const response = await fetch(`${BASE_URL}/user-info`, { 
                    headers: { 
                        'Authorization': `Bearer ${token}` 
                    }
                });
                const data = await response.json();
                resultElement.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                resultElement.textContent = `请求出错: ${error.message}`;
            }
        }

        async function testUpdateUserInfo() {
            const token = document.getElementById('updateToken').value;
            const gender = document.getElementById('updateGender').value;
            const nickName = document.getElementById('updateNickName').value;
            const motto = document.getElementById('updateMotto').value;
            const resultElement = document.getElementById('updateUserInfoResult');

            const updateData = {};
            if (gender) updateData.gender = gender;
            if (nickName) updateData.nick_name = nickName;
            if (motto) updateData.motto = motto;

            try {
                const response = await fetch(`${BASE_URL}/update-user-info`, { 
                    method: 'POST', 
                    headers: { 
                        'Content-Type': 'application/json', 
                        'Authorization': `Bearer ${token}` 
                    }, 
                    body: JSON.stringify(updateData) 
                });
                const data = await response.json();
                resultElement.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                resultElement.textContent = `请求出错: ${error.message}`;
            }
        }

        async function testTest() {
            const code = document.getElementById('testCode').value;
            const message = document.getElementById('testMessage').value;
            const resultElement = document.getElementById('testResult');
            let url = `${BASE_URL}/test`;
            const params = [];
            if (code) params.push(`code=${code}`);
            if (message) params.push(`message=${message}`);
            if (params.length > 0) {
                url += `?${params.join('&')}`;
            }

            try {
                const response = await fetch(url);
                const data = await response.json();
                resultElement.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                resultElement.textContent = `请求出错: ${error.message}`;
            }
        }
    </script>
</body>
</html>